<template>
    <footer class="xf-footer core xf-content-top">
        <p>&copy; {{ years }} <a rel="noopener noreferrer" :href="webUrl" class="xf-copyright-title">{{ title }}</a> 已安全运行<strong>{{ webDays }}</strong>天</p>
        <p class="xf-footer-icp">
            <img v-lazy="'/assets/images/icp.png'" alt="icp">
            <a href="https://beian.miit.gov.cn" target="_blank" rel="noopener noreferrer">{{ icp }}</a>
        </p>
        <br v-if="isShowPlayer">
    </footer>
</template>

<script setup lang="ts" name="Footer">
    import { ref, onMounted } from 'vue'
    import { useFooteStore } from '@/store'
    const footeStore = useFooteStore()
    const { title, years, webUrl, webDays, icp } = footeStore

    let isShowPlayer = ref(false)
    onMounted(() => {
        const MusicPlayer = document.getElementById('xf-MusicPlayer')
        isShowPlayer.value = MusicPlayer ? true : false
    })
</script>

<style scoped lang="less">
    .xf-footer {
        font-size: .9rem;
        margin-bottom: 1em;

        p {
            margin-top: .5em;

            &:first-child {
                margin-top: 0;
            }
        }

        .xf-copyright-title {
            font-weight: bold;
            background: ms-linear-gradient(45deg, var(--nitai5-linear-color-2));
            background: -o-linear-gradient(45deg, var(--nitai5-linear-color-2));
            background: linear-gradient(45deg, var(--nitai5-linear-color-2));
            color: transparent;
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-animation: xf_move 20s linear infinite;
            animation: xf_move 20s linear infinite;
        }

        @-webkit-keyframes xf_move {
            from {
                backgroud-position: 0
            }

            to {
                background-position: 1000px 0
            }
        }

        @keyframes xf_move {
            from {
                backgroud-position: 0
            }

            to {
                background-position: 1000px 0
            }
        }

        .xf-footer-icp {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;

            img {
                width: 18px;
            }

            a {
                margin-left: .25em;
            }
        }
    }
</style>